<template>
  <div>
    <div class="div1">
      <div class="div1_item">
        <div class="div1_item_lef">
          <div>
            <img class="logo" src="../assets/logo_one.png" alt="" />
          </div>
        </div>
        <div>
          <a
            class="div1_item_rig_ever"
            href=""
            style="color: black; font-size: 20px"
            >菜谱</a
          >
          <a
            class="div1_item_rig_ever"
            href=""
            style="color: black; font-size: 20px"
            >公告</a
          >
          <a
            class="div1_item_rig_ever"
            href=""
            style="color: black; font-size: 20px"
            >注册</a
          >
          <span
            class="div1_item_rig_ever"
            href=""
            @click="open"
            style="color: black; font-size: 20px"
            >登录</span
          >
        </div>
      </div>
    </div>
    <div class="boxx"></div>
    <template>
      <div class="dl-box" v-if="hide">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="登录" name="first">
            <div>
              <el-input
                v-model="uname"
                placeholder="请输入内容"
                clearable
                class="dl-mg dl-w"
              ></el-input>
              <el-input
                placeholder="请输入密码"
                v-model="upwd"
                show-password
                clearable
                class="dl-mg dl-w"
              ></el-input>
              <el-button type="primary" class="dl-mg dl-w">登录</el-button>
            </div>
            <div class="dl-a">
              <el-link type="primary" :underline="false">用户注册</el-link>
              <el-link type="primary" :underline="false">忘记密码</el-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="注册" name="second">
            <div>
              <el-input
                v-model="uname"
                placeholder="请输入内容"
                clearable
                class="dl-mg dl-w"
              ></el-input>
              <el-input
                placeholder="请输入密码"
                v-model="upwd"
                show-password
                clearable
                class="dl-mg dl-w"
              ></el-input>
              <el-button type="primary" class="dl-mg dl-w">登录</el-button>
            </div>
            <div class="dl-a">
              <el-link type="primary" :underline="false">用户注册</el-link>
              <el-link type="primary" :underline="false">忘记密码</el-link>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <div class="div2">
      <img src="../assets/beijing2.png" alt="" />
    </div>
    <div class="div3">
      <div class="div3_next">时令热搜</div>
    </div>
    <div class="div4">
      <div class="div4_item">
        <el-row class="an_niu">
          <el-button round>自制雪糕</el-button>
          <el-button type="primary" round>粽子</el-button>
          <el-button type="success" round>丝瓜</el-button>
          <el-button type="info" round>冷面</el-button>
          <el-button type="warning" round>凉面</el-button>
        </el-row>
        <el-row class="an_niu2">
          <el-button type="warning" round>绿豆糕</el-button>
          <el-button type="info" round>肉粽子</el-button>
          <el-button type="success" round>绿豆糕</el-button>
          <el-button type="primary" round>木耳菜</el-button>
          <el-button round>可乐鸡翅</el-button>
        </el-row>
        <el-row class="an_niu3">
          <el-button round>糖醋排骨</el-button>
          <el-button type="primary" round>红烧肉</el-button>
          <el-button type="success" round>冷饮</el-button>
          <el-button type="info" round>蒸茄子</el-button>
          <el-button type="warning" round>热狗包</el-button>
        </el-row>
      </div>
    </div>
    <div class="div5_item" v-if="recipe[0]" @mousewheel="movem1()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">最新食谱</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="div5_item_content_one">
          <div>简介</div>
          <div v-html="recipe[0].synopsis"></div>
        </div>
        <div class="div5_item_content_two">
          <div>食材</div>
          <div v-html="recipe[0].material"></div>
        </div>
      </div>

      <div class="div5_item_next" id="modiv5"></div>
      <div class="div5_item_content_three">
        <div>做法</div>
        <br />
        <div v-html="recipe[0].practice"></div>
      </div>
    </div>
    <div class="div6_item" v-if="recipe[1]" @mousewheel="movem2()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">本周最热</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="div5_item_content_one">
          <div>简介</div>
          <div v-html="recipe[1].synopsis"></div>
        </div>
        <div class="div5_item_content_two">
          <div>食材</div>
          <div v-html="recipe[1].material"></div>
        </div>
      </div>
      <div class="div6_item_next" id="modiv6"></div>
      <div class="div5_item_content_three">
        <div>做法</div>
        <br />
        <div v-html="recipe[1].practice"></div>
      </div>
    </div>
    <div class="div7_item" v-if="recipe[2]" @mousewheel="movem3()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">最新食谱</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="div5_item_content_one">
          <div>简介</div>
          <div v-html="recipe[2].synopsis"></div>
        </div>
        <div class="div5_item_content_two">
          <div>食材</div>
          <div v-html="recipe[2].material"></div>
        </div>
      </div>
      <div class="div7_item_next" id="modiv7"></div>
      <div class="div5_item_content_three">
        <div>做法</div>
        <br />
        <div v-html="recipe[2].practice"></div>
      </div>
    </div>

    <div class="div8">
      <div class="div8_concent">
        <div class="div8_concent_lef">
          <div class="div8_concent_box">
            <img
              class="imgs"
              src="../assets/be12d17069fe1b9d27fef1511c78a2e.png"
              alt=""
            />
            <img class="imgs1" src="../assets/logo_gray.png" alt="" />
          </div>
          <div
            style="
              color: #817d74;
              font-size: 12px;
              margin-left: 10px;
              margin-top: 10px;
            "
          >
            版权声明
          </div>
          <div
            style="
              color: #817d74;
              font-size: 12px;
              margin-left: 10px;
              margin-top: 10px;
            "
          >
            商务联系:176xxxx6939
          </div>
          <div class="div8_concent_box2">
            <img class="div8_concent_img" src="../assets/picp_bg.png" alt="" />
            <span class="div8_concent_img_text">31011502014886</span>
          </div>
        </div>
        <div class="div8_concent_rig">
          <div class="div8_concent_rig_con">
            <div class="text_item">厨神争霸赛赛</div>
            <div class="text_item">金牌厨师</div>
            <div class="text_item">厨师排行榜</div>
            <div class="text_item">下饭厨师</div>
          </div>

          <div class="div8_concent_rig_con_next">
            <div class="text_item">金厨杯</div>
            <div class="text_item">厨神：一较高下</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getdata();
    this.open();
  },
  data() {
    return {
      recipe: [],
      uname: "",
      upwd: "",
      hide: "false",
      activeName: "second",
      gundong1: 150,
      gundong2: 150,
      gundong3: 150,
    };
  },
  methods: {
    movem1() {
      //监听鼠标滚动事件，滚动触发背景图移动事件
      if (event.wheelDelta > 0) {
        this.gundong1 += 30;
        if (this.gundong1 >= 180) {
          this.gundong1 = 180;
        }
      } else {
        this.gundong1 -= 30;
        if (this.gundong1 <= 30) {
          this.gundong1 = 30;
        }
      }
      console.log(event.wheelDelta);
      let aaa = document.getElementById("modiv5");
      aaa.style.backgroundPositionY = this.gundong1 + "px";
    },
    movem2() {
      if (event.wheelDelta > 0) {
        this.gundong2 += 30;
        if (this.gundong2 >= 180) {
          this.gundong2 = 180;
        }
      } else {
        this.gundong2 -= 30;
        if (this.gundong2 <= 30) {
          this.gundong2 = 30;
        }
      }
      let bbb = document.getElementById("modiv6");
      bbb.style.backgroundPositionY = this.gundong2 + "px";
    },
    movem3() {
      if (event.wheelDelta > 0) {
        this.gundong3 += 30;
        if (this.gundong3 >= 180) {
          this.gundong3 = 180;
        }
      } else {
        this.gundong3 -= 30;
        if (this.gundong3 <= 30) {
          this.gundong3 = 30;
        }
      }
      let ccc = document.getElementById("modiv7");
      ccc.style.backgroundPositionY = this.gundong3 + "px";
    },
    getdata() {
      const url = "http://localhost:3000/rlist";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.recipe = res.data.data;
      });
    },
    open() {
      this.hide = !this.hide;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
.div1 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: #e7e8ea;
}
.boxx {
  width: 100%;
  height: 51px;
}
.div1_item {
  width: 1200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.div1_item_lef {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  width: 50px;
  height: 50px;
}
.div1_item_rig_ever {
  margin-left: 10px;
  text-decoration: none;
  color: #cbcbcb;
  font-size: 14px;
  cursor: pointer;
}
.div1_item_rig_ever:hover {
  color: #ff8251;
}
/* .div2 {
  min-height: 840px;
  background-image: url("/src/assets/beijing2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 25px;
} */
.div2 > img {
  min-width: 800px;
  width: 100%;
}
.div3 {
  min-width: 800px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div3_next {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
.div4 {
  min-width: 800px;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div4_item {
  width: 600px;
  height: 150px;
  border-radius: 25px;
}

.an_niu {
  margin-left: 15px;
  margin-top: 8px;
}
.an_niu2 {
  margin-left: 50px;
  margin-top: 8px;
}
.an_niu3 {
  margin-left: 90px;
  margin-top: 8px;
}
.div5_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
}
.div5_item_text {
  width: 1200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
}
.div5_item_text:hover {
  color: #ff8251;
}
.div5_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s01.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  /* background-position: 50% 131.93px; */
  transition: 0.1s;
  background-position-x: 50%;
  /* background-position-y:131.93px; */
}
.div5_item_text_one {
  font-size: 24px;
  font-weight: 600;
}
.div5_item_content {
  width: 1200px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
  margin-top: 30px;
}
.div5_item_content_one {
  width: 400px;
  height: 200px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  /* justify-content: center;  */
  border-radius: 25px;
  background-color: #FFEFD5;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_one:hover {
  transform: scale(1.1);
  box-shadow: #ccc 0px 0px 10px 5px ;
}

.div5_item_content_two {
  width: 400px;
  height: 200px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  /* justify-content: center; */
  border-radius: 25px;
 background-color: #FFEFD5;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_two:hover {
  transform: scale(1.1);
  box-shadow: #ccc 0px 0px 10px 5px ;
}
.div5_item_content_three {
  width: 800px;
  height: 300px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  justify-content: center;
  border-radius: 25px;
 background-color: #FFEFD5;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_three:hover {
  transform: scale(1.1);
  box-shadow: #ccc 0px 0px 10px 5px ;
}
.div5_item_content_one > div:nth-child(2) {
  width: 250px;
  margin-top: 10px;
  font-size: 16px;
}
.div5_item_content_two > div:nth-child(2) {
  width: 250px;
  margin-top: 10px;
  font-size: 16px;
}
.div6_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
  background-size: 1200px;
}
.div6_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s02.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  transition: 0.1s;
  /* background-position: 50% 131.93px; */
  background-position-x: 50%;
}
.div7_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
}
.div7_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s03.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  transition: 0.1s;
  /* background-position: 50% 131.93px; */
  background-position-x: 50%;
}
.div8 {
  width: 100%;
  height: 195px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eae6e3;
}
.div8_concent {
  width: 1200px;
  height: 195px;
  display: flex;
}
.div8_concent_box {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-top: 10px;
}
.imgs {
  width: 80px;
  height: 80px;
  padding: 8px;
  background-color: white;
}
.imgs1 {
  width: 80px;
  height: 30px;
  margin-left: 5px;
}
.div8_concent_text {
  font-size: 28px;
  font-weight: 600;
  color: #817d74;
  margin-left: 5px;
}
.div8_concent_box2 {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-top: 10px;
}
.div8_concent_img {
  width: 60px;
  height: 20px;
}
.div8_concent_img_text {
  font-size: 12px;
  color: #817d74;
}
.div8_concent_rig_con {
  display: flex;
  width: 700px;
  margin-top: 20px;
  margin-left: 130px;
  color: #817d74;
  justify-content: space-around;
}
.div8_concent_rig_con_next {
  display: flex;
  width: 700px;
  margin-left: 130px;
  margin-top: 20px;
  color: #817d74;
  justify-content: space-around;
}
.text_item {
  color: #817d74;
}
.text_item:hover {
  color: #ff8251;
}

.dl-box {
  /* background-image: url("/SSS/vue-sss/public/dl-1.jpg"); */
  width: 500px;
  height: 400px;
  margin: 10% auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 36%;
  top: 10%;
  background-color: rgb(248, 246, 246);
  border-radius: 25px;
}
.dl-w {
  width: 350px;
}

.dl-a {
  display: flex;
  justify-content: space-around;
}

.dl-mg {
  margin-bottom: 10px;
}
.dl-mg.dl-w {
  width: 320px;
  margin-left: 92px;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>